<template>
  <div class="flex items-center">
    <el-time-select
      class="w-64 mr-2"
      v-model="startTime"
      :placeholder="startPlaceholder"
      :start="startTimeStart"
      :step="startStep"
      :end="startTimeEnd"
      v-bind="$attrs.startOptions"
    ></el-time-select>
    <el-time-select
      class="w-64"
      v-model="endTime"
      :min-time="startTime"
      :placeholder="endPlaceholder"
      :start="endTimeStart"
      :step="endStep"
      :end="endTimeEnd"
      :disabled="endTimeDisabled"
      v-bind="$attrs.endOptions"
    ></el-time-select>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// Define props
const props = defineProps({
  startPlaceholder: {
    type: String,
    default: '请选择开始时间',
  },
  endPlaceholder: {
    type: String,
    default: '请选择结束时间',
  },
  startTimeStart: {
    type: String,
    default: '08:00',
  },
  startStep: {
    type: String,
    default: '00:30',
  },
  startTimeEnd: {
    type: String,
    default: '24:00',
  },
  endTimeStart: {
    type: String,
    default: '08:00',
  },
  endStep: {
    type: String,
    default: '00:30',
  },
  endTimeEnd: {
    type: String,
    default: '24:00',
  },
})

// Define emits
const emit = defineEmits(['startChange', 'endChange'])

// State variables
const startTime = ref('')
const endTime = ref('')
const endTimeDisabled = ref(true)

// Watchers
watch(startTime, (val) => {
  if (val === '') {
    endTime.value = ''
    endTimeDisabled.value = true
  } else {
    endTimeDisabled.value = false
    emit('startChange', val)
  }
})

watch(endTime, (val) => {
  if (val !== '') {
    emit('endChange', {
      startTime: startTime.value,
      endTime: val,
    })
  }
})
</script>

<style lang="scss" scoped></style>
